<template>
    <div class="f-pager" :class="{hide:hideIfOnePage === true && totalPage<=1}">
        <span class="f-pager-nav prev" :class="{disabled:currentPage === 1}" @click="onClickPage(currentPage-1)">
            <f-icon name="left"></f-icon>
        </span>
        <template v-for="page in pages">
            <template v-if="page === currentPage">
                <span class="f-pager-item current">{{page}}</span>
            </template>
            <template v-else-if="page === '...'">
                <f-icon class="f-pager-separator" name="dots"></f-icon>
            </template>
            <template v-else>
                <span class="f-pager-item other" @click="onClickPage(page)">{{page}}</span>
            </template>
        </template>
        <span class="f-pager-nav next" :class="{disabled:currentPage === totalPage}" @click="onClickPage(currentPage+1)">
            <f-icon name="right"></f-icon>
        </span>
    </div>
</template>

<script>
  import FIcon from './components/icon';

  export default {
    name: "FPager"
    , components: {FIcon}
    , props: {
      totalPage: {
        type: Number
        , required: true
      }
      , currentPage: {
        type: Number
        , required: true
      }
      , hideIfOnePage: {
        type: Boolean
        , default: true
      }
    }
    ,computed:{
      pages(){
        return unique([1, this.totalPage
          , this.currentPage
          , this.currentPage - 1, this.currentPage - 2
          , this.currentPage + 1, this.currentPage + 2]
          .filter((n) => n >= 1 && n <= this.totalPage)
          .sort((a, b) => a - b))
          .reduce((p, c, index, array) => {
            p.push(c);
            if (array[index + 1] !== undefined && array[index + 1] - array[index] > 1) {
              p.push('...')
            }
            return p;
          }, []);
      }
    }
    ,methods:{
      onClickPage(n){
        if(n>=1&&n<=this.totalPage){
          this.$emit('update:currentPage',n)
        }
      }
    }
  }

  function unique(array) {
    // return [...new Set(array)]

    const object = {};
    array.map((number) => {
      object[number] = true
    });

    return Object.keys(object).map(s => parseInt(s, 10));
  }
</script>

<style lang="scss">
    @import "./components/var";
    .f-pager {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        user-select:none;
        $width: 20px;
        $height: 20px;
        $font-size: 12px;
        &.hide{display:none;}
        &-separator {
            width: $width;
            font-size: $font-size;
        }
        &-item {
            min-width: $width;
            height: $height;
            border: 1px solid $grey;
            border-radius: $border-radius;
            padding: 0 8px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            font-size: $font-size;
            margin: 0 4px;
            cursor: pointer;
            &.current, &:hover {
                border-color: $blue;
            }
            &.current {
                cursor: default;
            }
        }
        &-nav {
            margin: 0 4px;
            display: inline-flex;justify-content: center;align-items: center;
            background: $grey;
            height: $height;
            width: $width;
            border-radius: $border-radius;
            font-size: $font-size;
            &.disabled {
                svg {fill: darken($grey, 30%)}
            }
        }
    }
</style>
